<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import ReCol from "@/components/ReCol";
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    title: "新增",
    code: "",
    palletId: 0,
    remarks: "",
  })
});


const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}
defineExpose({ getRef });
const switchVal = ref()
const switchChange = (val: boolean | string | number) => {
	if(val) {
		newFormInline.value.code = 'P'+(new Date()).toLocaleString().replace(/[:/ ]/g, '')
	} else {
		newFormInline.value.code = ""
	}
}
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="auto"
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="托盘编码" prop="code">
          <el-input
            v-model="newFormInline.code"
            clearable
            placeholder="请输入托盘编码"
			:maxlength="30"
			:disabled="newFormInline.title==='新增'?false:true"
          />
        </el-form-item>
      </re-col>
	  <re-col :value="12" :xs="24" :sm="24"  v-if="newFormInline.title==='新增'">
		
		<div style="display: flex;align-items: center;">
			<el-switch v-model="switchVal" @change="switchChange" active-text="自动生成"/>
		</div>
	  </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="备注">
          <el-input v-model="newFormInline.remarks" :autosize="{ minRows: 2, maxRows: 4 }"
          	type="textarea" placeholder="请输入备注" :maxlength="100" show-word-limit/>
        </el-form-item>
      </re-col>
	  
    </el-row>
  </el-form>
</template>
<style scoped></style>
